<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>智能需求管理平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
            rel="stylesheet"
    />

    <!-- 配置Tailwind主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: "#00BFA5",
                        secondary: "#007BFF",
                        neutral: "#F5F7FA",
                        dark: "#1D2939",
                    },
                    fontFamily: {
                        inter: ["Inter", "sans-serif"],
                    },
                },
            },
        };
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary text-white font-medium rounded-lg px-6 py-3 transition-all duration-300 hover:bg-primary/90 hover:shadow-md;
            }
            .btn-secondary {
                @apply bg-white text-primary border border-primary font-medium rounded-lg px-6 py-3 transition-all duration-300 hover:bg-primary/5;
            }
            .section-padding {
                @apply py-16 md:py-24;
            }
            .section-title {
                @apply text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-6 text-center;
            }
            .section-subtitle {
                @apply text-[clamp(1rem,2vw,1.2rem)] text-gray-600 mb-12 text-center max-w-3xl mx-auto;
            }
        }
    </style>
</head>
<body class="font-inter bg-white">
<!-- 导航栏 -->
<header
        id="navbar"
        class="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm transition-all duration-300 shadow-sm"
>
    <div class="container mx-auto px-4 md:px-6">
        <div class="flex justify-between items-center py-4">
            <a href="#" class="text-2xl font-bold text-primary flex items-center">
                <i class="fa-solid fa-lightbulb mr-2"></i>
                <span>智能需求管理平台</span>
            </a>

            <!-- 桌面导航 -->
            <nav class="hidden md:flex items-center space-x-8">
                <a
                        href="#features"
                        class="text-gray-700 hover:text-primary transition-colors"
                >产品介绍</a
                >
                <a
                        href="#solutions"
                        class="text-gray-700 hover:text-primary transition-colors"
                >解决方案</a
                >
                <a
                        href="#help"
                        class="text-gray-700 hover:text-primary transition-colors"
                >帮助中心</a
                >
                <!-- 修改：链接到第二个页面（login.html） -->
                <a href="/login" class="btn-primary">登录/注册</a>
            </nav>

            <!-- 移动端菜单按钮 -->
            <button
                    id="menu-toggle"
                    class="md:hidden text-gray-700 focus:outline-none"
            >
                <i class="fa-solid fa-bars text-xl"></i>
            </button>
        </div>

        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="md:hidden hidden pb-4">
            <nav class="flex flex-col space-y-4">
                <a
                        href="#features"
                        class="text-gray-700 hover:text-primary transition-colors"
                >产品介绍</a
                >
                <a
                        href="#solutions"
                        class="text-gray-700 hover:text-primary transition-colors"
                >解决方案</a
                >
                <a
                        href="#help"
                        class="text-gray-700 hover:text-primary transition-colors"
                >帮助中心</a
                >
                <a
                        href="#contact"
                        class="text-secondary hover:text-secondary/80 transition-colors"
                >联系销售</a
                >
                <!-- 修改：链接到第二个页面（login.html） -->
                <a href="/login" class="btn-primary text-center">登录/注册</a>
            </nav>
        </div>
    </div>
</header>

<!-- 英雄区域 -->
<section
        class="pt-32 pb-20 md:pt-40 md:pb-32 bg-gradient-to-br from-neutral to-white overflow-hidden"
>
    <div class="container mx-auto px-4 md:px-6">
        <div class="flex flex-col-reverse lg:flex-row items-center">
            <div class="w-full lg:w-1/2 mt-12 lg:mt-0">
                <h1
                        class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark leading-tight mb-6"
                >
                    打造智能高效的<br /><span class="text-primary">需求管理体系</span>
                </h1>
                <p class="text-lg text-gray-600 mb-8 max-w-xl">
                    让团队协作更简单，需求管理更高效。AI驱动的智能平台，助您突破传统管理模式的局限，实现需求全生命周期的精细化管理。
                </p>
                <div
                        class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mb-8"
                >
                    <button
                            onclick="window.location.href='/login'"
                            class="btn-primary"
                    >
                        <i class="fa-solid fa-rocket mr-2"></i>开始免费试用
                    </button>
                    <button class="btn-secondary">
                        <i class="fa-solid fa-calendar-check mr-2"></i>预约演示
                    </button>
                </div>
                <div class="flex flex-wrap gap-4">
                    <div class="flex items-center text-gray-700">
                        <i class="fa-solid fa-check-circle text-green-500 mr-2"></i>
                        <span>免费试用</span>
                    </div>
                    <div class="flex items-center text-gray-700">
                        <i class="fa-solid fa-check-circle text-green-500 mr-2"></i>
                        <span>无需信用卡</span>
                    </div>
                    <div class="flex items-center text-gray-700">
                        <i class="fa-solid fa-check-circle text-green-500 mr-2"></i>
                        <span>专属客户成功服务</span>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/2 relative">
                <div
                        class="relative z-10 bg-white rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-500"
                >
                    <img
                            src="/1.png"
                            class="w-full h-auto"
                    />
                </div>
                <!-- 装饰元素 -->
                <div
                        class="absolute -top-10 -right-10 w-40 h-40 bg-primary/10 rounded-full blur-3xl"
                ></div>
                <div
                        class="absolute -bottom-10 -left-10 w-40 h-40 bg-secondary/10 rounded-full blur-3xl"
                ></div>
            </div>
        </div>
    </div>
</section>

<!-- 为什么选择我们 -->
<section id="features" class="section-padding bg-white">
    <div class="container mx-auto px-4 md:px-6">
        <h2 class="section-title">为什么选择我们?</h2>
        <p class="section-subtitle">
            我们提供端到端的需求管理解决方案，助力企业数字化转型
        </p>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- 功能卡片1 -->
            <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
                <div
                        class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6"
                >
                    <i class="fa-solid fa-users text-primary text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">多角色与兴趣选择</h3>
                <p class="text-gray-600">
                    可选择专家/发布方角色、兴趣，实现精准需求推送。
                </p>
            </div>

            <!-- 功能卡片2 -->
            <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
                <div
                        class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6"
                >
                    <i class="fa-solid fa-list-check text-primary text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">需求管理</h3>
                <p class="text-gray-600">
                    灵活可定制地创建、发布、管理需求，满足不同想法的需求与完善。
                </p>
            </div>

            <!-- 功能卡片3 -->
            <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
                <div
                        class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6"
                >
                    <i class="fa-solid fa-chart-line text-primary text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">智能分析</h3>
                <p class="text-gray-600">
                    AI驱动的智能分析，提供需求完善建议与洞察。
                </p>
            </div>

            <!-- 功能卡片4 -->
            <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
                <div
                        class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6"
                >
                    <i class="fa-solid fa-shield text-primary text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">数据安全</h3>
                <p class="text-gray-600">企业级数据加密，保障信息安全。</p>
            </div>
        </div>
    </div>
</section>

<!-- 平台特点 -->
<section id="solutions" class="section-padding bg-neutral">
    <div class="container mx-auto px-4 md:px-6">
        <h2 class="section-title">专为企业打造的智能需求管理平台</h2>
        <p class="section-subtitle">
            覆盖需求管理全流程，提供企业级的安全性和可扩展性
        </p>

        <div class="flex flex-col lg:flex-row items-center gap-12">
            <div class="w-full lg:w-1/2 relative">
                <div
                        class="relative z-10 rounded-xl overflow-hidden shadow-2xl transform hover:scale-[1.02] transition-transform duration-500"
                >
                    <img
                            src="/2.png"
                            alt="平台功能演示"
                            class="w-full h-auto"
                    />
                </div>
                <!-- 装饰元素 -->
                <div
                        class="absolute -top-5 -right-5 w-32 h-32 bg-primary/10 rounded-full blur-2xl"
                ></div>
            </div>

            <div class="w-full lg:w-1/2">
                <div class="space-y-8">
                    <!-- 特点1 -->
                    <div class="flex gap-4">
                        <div
                                class="flex-shrink-0 w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center"
                        >
                            <i class="fa-solid fa-database text-primary text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">数据驱动决策</h3>
                            <p class="text-gray-600">
                                提供完整的数据分析和可视化工具，帮助发布方做出更明智的决策。通过AI算法分析需求趋势和专家反馈，优化需求规划和资源分配。
                            </p>
                        </div>
                    </div>

                    <!-- 特点2 -->
                    <div class="flex gap-4">
                        <div
                                class="flex-shrink-0 w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center"
                        >
                            <i class="fa-solid fa-lock text-primary text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">企业级安全</h3>
                            <p class="text-gray-600">
                                符合企业安全标准，提供多重身份认证和数据加密保护。严格的权限管理和审计日志，确保企业数据安全和合规性。
                            </p>
                        </div>
                    </div>

                    <!-- 特点3 -->
                    <div class="flex gap-4">
                        <div
                                class="flex-shrink-0 w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center"
                        >
                            <i class="fa-solid fa-sliders text-primary text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">灵活配置</h3>
                            <p class="text-gray-600">
                                支持随时修改和完善需求，满足不同团队的个性化需求。自定义工作流程、表单字段和审批流程，适应多样化的业务场景。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 角色选择 -->
<section id="roles" class="section-padding bg-white">
    <div class="container mx-auto px-4 md:px-6">
        <h2 class="section-title">按需选择合适的角色</h2>
        <p class="section-subtitle">根据您的需求选择适合的角色身份</p>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- 专家角色 -->
            <div
                    class="bg-white border border-gray-100 rounded-xl overflow-hidden shadow-sm card-hover"
            >
                <div class="bg-gradient-to-r from-primary/90 to-primary p-8">
                    <h3 class="text-2xl font-bold text-white mb-2">流动专家</h3>
                    <p class="text-white/80">为专业人士提供完整的需求参与体验</p>
                </div>
                <div class="p-8">
                    <ul class="space-y-4 mb-8">
                        <li class="flex items-start">
                            <i class="fa-solid fa-check text-primary mt-1 mr-3"></i>
                            <span>兴趣选择，精准匹配专业领域</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-check text-primary mt-1 mr-3"></i>
                            <span>智能需求匹配推荐</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-check text-primary mt-1 mr-3"></i>
                            <span>发布专业评论和建议</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-check text-primary mt-1 mr-3"></i>
                            <span>完整的项目协作工具集</span>
                        </li>
                    </ul>
                    <button class="w-full btn-primary">
                        <i class="fa-solid fa-user-plus mr-2"></i>成为专家
                    </button>
                </div>
            </div>

            <!-- 发布方角色 -->
            <div
                    class="bg-white border border-gray-100 rounded-xl overflow-hidden shadow-sm card-hover"
            >
                <div class="bg-gradient-to-r from-secondary/90 to-secondary p-8">
                    <h3 class="text-2xl font-bold text-white mb-2">发布方</h3>
                    <p class="text-white/80">为企业提供专业的项目发布和管理服务</p>
                </div>
                <div class="p-8">
                    <ul class="space-y-4 mb-8">
                        <li class="flex items-start">
                            <i class="fa-solid fa-check text-secondary mt-1 mr-3"></i>
                            <span>项目需求发布与管理</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-check text-secondary mt-1 mr-3"></i>
                            <span>查看专家建议和反馈</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-check text-secondary mt-1 mr-3"></i>
                            <span>灵活的需求改动与完善</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-check text-secondary mt-1 mr-3"></i>
                            <span>全面的质量评估体系</span>
                        </li>
                    </ul>
                    <button class="w-full btn-secondary border-secondary">
                        <i class="fa-solid fa-plus-circle mr-2"></i>发布项目
                    </button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 开始使用 -->
<section
        id="start"
        class="section-padding bg-gradient-to-br from-primary/10 to-primary/5"
>
    <div class="container mx-auto px-4 md:px-6 text-center">
        <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-8">
            准备好开始了吗?
        </h2>
        <button
                onclick="window.location.href='/login'"
                class="btn-primary text-lg px-10 py-4 mb-4"
        >
            <i class="fa-solid fa-rocket mr-2"></i>立即开始使用
        </button>
        <p class="text-gray-600">免费试用，带您轻松体验！</p>
    </div>
</section>

<!-- 页脚 -->

<!-- JavaScript -->
<script>
    // 移动端菜单切换
    const menuToggle = document.getElementById("menu-toggle");
    const mobileMenu = document.getElementById("mobile-menu");

    menuToggle.addEventListener("click", () => {
        mobileMenu.classList.toggle("hidden");
    });

    // 导航栏滚动效果
    const navbar = document.getElementById("navbar");

    window.addEventListener("scroll", () => {
        if (window.scrollY > 50) {
            navbar.classList.add("shadow-md");
            navbar.classList.add("py-2");
            navbar.classList.remove("py-4");
        } else {
            navbar.classList.remove("shadow-md");
            navbar.classList.add("py-4");
            navbar.classList.remove("py-2");
        }
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
        anchor.addEventListener("click", function (e) {
            e.preventDefault();

            const targetId = this.getAttribute("href");
            if (targetId === "#") return;

            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 80,
                    behavior: "smooth",
                });

                // 关闭移动菜单
                if (!mobileMenu.classList.contains("hidden")) {
                    mobileMenu.classList.add("hidden");
                }
            }
        });
    });
</script>
</body>
</html>
